<template>
  <div class="zhifu">
    <h4>选择支付方式</h4>
    <p v-for="(item, index) in list" :key="index" @click="multiSelect(index)">
      <span class="img" :class="item.name" /><span>{{ item.label }}</span><i v-if="item.enable" class="iconfont icon-duigou"></i>
    </p>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [
        {
          label: '支付宝',
          name: 'alipay',
          enable: true
        },
        {
          label: '微信',
          name: 'wechat',
          enable: false
        },
        {
          label: '银行卡',
          name: 'card',
          enable: false
        }
      ]
    }
  },
  beforeMount () {
    this.updatePayment()
  },
  methods: {
    multiSelect (index) {
      const item = this.list[index]
      item.enable = !item.enable
      this.list[index] = item
      this.updatePayment()
    },
    updatePayment () {
      const payment = {}
      this.list.forEach(item => (payment[`${item.name}_enable`] = item.enable ? 1 : 0))
      this.$emit('updatePayment', payment)
    }
  }
}
</script>
<style scoped>
.img {
  float: left;
  margin: 8px 10px 10px 0;
  width: 30px !important;
  height: 30px;
  background-size: 100%;
}
.alipay {
  background-image: url('~@/assets/images/zhifubao.png');
  background-repeat: no-repeat;
}
.wechat {
  background-image: url('~@/assets/images/weixin.png');
  background-repeat: no-repeat;
}
.card {
  background-image: url('~@/assets/images/xinyongka.png');
  background-repeat: no-repeat;
}
</style>
